<template>
  <div class="box">
    <h1>组件间通信: $ref & $parent</h1>

    <p>BABA有存款:{{ money }}</p>
    <button @click="borrowMoneyFromXM">找小明借钱100</button><br>
    <button @click="borrowMoneyFromXH">找小红借钱150</button><br>

    <br>
    <Son ref="sonRef" />

    <br>
    <Daughter ref="dauRef" />

  </div>
</template>


<script lang="ts" setup>
// vue2
//    $ref      可以获取到组件实例
//    $children 可以获取到当前组件的所有子组件
//    $parent   可以获取到当前组件的父组件
// vue3
//    ref       获取到组件实例
//    children  移除
//    $parent   保留了,从模板中使用即可,获取到的是一个proxy对象
// 【总结】:
// 1. 获取组件使用 ref, 在setup当中,只要抛出的变量和模板中写的ref属性值一样,即可获取当组件实例
// 2. defineExpose 用于定义其他组件可以修改当前组件的数据有哪些
import Son from './Son.vue'
import Daughter from './Daughter.vue'
import { ref } from 'vue'
const money = ref(1000)
// // 获取到sonRef组件
// // 在setup当中,只要抛出的变量和模板中写的ref属性值一样,即可获取当组件实例
// // 获取到组件实例之后,并不能直接获取到组件中的数据,需要做处理
// // 组件需要在内部使用 defineExpose 将数据暴露出来,其他组件才可以使用这个数据
// const sonRef = ref(); // 获取组件实例,拿到ref对象,.value属性才是组件

// const dauRef = ref(); // 获取组件实例,拿到ref对象,.value属性才是组件


// const borrowMoneyFromXM = () => {
//   // 小明的钱减少
//   // console.log(sonRef.value.money)
//   sonRef.value.money -= 100
//   // 自己的钱增多
//   money.value += 100
// }

// const borrowMoneyFromXH = () => {
//   // 小红的钱减少
//   // console.log(dauRef.value.money)
//   dauRef.value.money -= 150
//   // 自己的钱增多
//   money.value += 150
// }

// // 允许外部使用的数据
// defineExpose({
//   money
// })
const sonRef = ref()
const dauRef = ref()
const borrowMoneyFromXM = () => {
  // 小明的钱减少
  // console.log(sonRef);
  // console.log(sonRef.value);
  // console.log(sonRef.value.money);
  sonRef.value.money -= 100
  // 自己的钱增多
  money.value += 100
}
const borrowMoneyFromXH = () => {
  dauRef.value.money-=150
  money.value+=150
}
defineExpose({
  money
})
</script>
